<template>
	<view class="container_cer_success_rich">
		<view class="header">
			<image class="header-img-rich" :src="data.avatar" />
			<view class="header-name-rich">{{ data.name }}</view>
			<image class="header-icon-rich" src="../../static/certificate-success-rich.png" />
		</view>
		<view class="content-rich">
			<view class="item">
				<view class="item-l">证件号</view>
				<view class="item-r">{{ idCard }}</view>
			</view>
			<view class="item">
				<view class="item-l">当前账号</view>
				<view class="item-r">
					{{ data.telephone ? data.telephone.replace(/^(\d{3})\d{4}(\d{4})/, '$1****$2') : '默认用户' }}</view>
			</view>
		</view>

		<view clss="ysxy" style="width: 100vw; text-align: center; padding-top: 50px; font-size: 14px">
			<text @click="open_url1(2)" class="b">《隐私协议》</text>
			<text @click="open_url1(1)" class="b">《注册协议》</text>
		</view>

		<view class="btn-rich" @click="goHome">回到首页</view>
	</view>
</template>

<script>
	import {
		getZWZUserDetail
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				data: getZWZUserDetail(),
				idCard: ''
			};
		},
		onLoad(e) {
			this.idCard = e.idCard;
		},
		methods: {
			open_url1(type) {
				this.$onTo(`pagesOther/xieyi/loginXy?type=` + type);
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>

<style lang="scss">
	.check_img {
		width: 18px;
		height: 18px;
		position: relative;
		top: 4px;
		right: 5px;
	}

	.ysxy {
		font-size: 14px;
		text-align: center;
		color: #5a5a5a;
	}

	.b {
		display: block;
		width: 100%;
		margin-top: 10rpx;
		color: #be9364;
	}

	.container_cer_success_rich {
		@include wh(100%, 100vh);

		.header {
			background: #fff;
			box-sizing: border-box;
			padding: 30rpx 0;
			margin-bottom: 20rpx;
			border-radius: 0 0 20rpx 20rpx;

			.header-img-rich {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 0 auto 10rpx auto;
			}

			.header-name-rich {
				text-align: center;
				font-family: PingFangSC-Medium;
				font-size: 36rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 500;
				margin-bottom: 10rpx;
			}

			.header-icon-rich {
				display: block;
				width: 151rpx;
				height: 53rpx;
				margin: 0 auto 18rpx auto;
			}
		}

		.content-rich {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.item {
				
				display: flex;
				align-items: center;
				height: 100rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				justify-content: space-between;

				.item-l,
				.item-r {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.btn-rich {
			border-radius: 49rpx;
			text-align: center;
			font-weight: 500;
			color: #fff;
			width: 500rpx;
			height: 80rpx;
			font-size: 28rpx;
			position: fixed;
			bottom: 150rpx;
			left: 50%;
			transform: translateX(-50%);
			line-height: 80rpx;
			@include global-background-color-red();
		}
	}
</style>